<template>
    <div class="main_menu">
        <div class="menu_title">{{ $store.state.topName }}</div>
        <el-menu :default-active="$route.path" class="el-menu-vertical-demo" router @select="selectMenu">
            <template v-for="(item,index) in $store.state.sonMenuList">
                <el-menu-item v-if="!item.childList" :index="item.powerPath">
                    <i :class="item.showStyle"></i>
                    <span slot="title">{{ item.powerName }}</span>
                </el-menu-item>
                <el-submenu v-else :index="item.powerPath">
                    <template slot="title">
                        <i :class="item.showStyle"></i>
                        <span slot="title">{{ item.powerName }}</span>
                    </template>
					<template v-for="(itm,idx) in item.childList">
						<el-menu-item :index="itm.powerPath">
							{{ itm.powerName }}
						</el-menu-item>
					</template>
                </el-submenu>
            </template>
        </el-menu>
    </div>
</template>

<script>

export default {
    name: "showMenu",
	methods: {
        selectMenu(path) {

        },
	}
}
</script>

<style lang="scss">
.menu_title {
    font-size: 30px;
    color: #fff;
    height: 60px;
    line-height: 60px;
    width: 100%;
    text-align: center;
    border-bottom: #cccccc 1px solid;
    border-top: #cccccc 1px solid;
}
.main_menu:not(.el-menu--collapse) {
    size: 16px;
    
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        border-right: none;
        width: 199px;
    }
    
    .el-menu {
        border-right: none;

        .el-submenu__title{
            i{
                font-size: 16px;
            }

            span {
                font-size: 16px;
            }
        }

        .el-menu-item {
            font-size: 14px;

            i{
                font-size: 16px;
            }

            span {
                font-size: 16px;
            }
        }
    }
}
</style>